
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:smart_freezer/core/resources/app_config.dart';
import 'package:smart_freezer/core/utils/tr_extension.dart';
import 'package:smart_freezer/generated/locale_keys.g.dart';

import '../utils/local_storage.dart';

typedef OnSelectedDate = void Function(String date);

/// 更新上传频率:
class UpdateTime extends StatefulWidget {
  UpdateTime(
      {required this.onSelectedValue,
        this.selectedValue = "",
        this.startValue = 1,
        this.endValue = 60});

  // 结果返回
  final OnSelectedDate onSelectedValue;
  final String selectedValue; //选中的时间
  final int startValue;
  final int endValue;

  @override
  _UpdateTimeState createState() => _UpdateTimeState();
}

class _UpdateTimeState extends State<UpdateTime> {
  //年数组
  List<String> valueList = [];
  //年的索引
  int valueIndex = 0;
  //每列的宽度
  double _columnWidth = 0;

  FixedExtentScrollController valueScrollController = FixedExtentScrollController();

  bool isDarkMode = LocalStorage.getThemeMode() == 1;

  @override
  void initState() {
    super.initState();

    _columnWidth = MainCommon.screenWidth / 3;

    _setupData();

    _initSelectedIndex();
  }

  @override
  void dispose() {
    valueScrollController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          _headerWidget(),
          _datePicker(),
        ],
      ),
    );
  }

  ///初始化数据
  void _setupData() {
    for (int i = widget.startValue; i <= widget.endValue; i++) {
      valueList.add(i.toString());
    }
  }

  ///初始化时间索引
  void _initSelectedIndex() {
    final List uniqueYearList = Set.from(valueList).toList();

    ///没有传选中值则默认为10分钟
    String year = "10";

    setState(() {
      valueIndex = uniqueYearList.indexOf(year);
    });

    valueScrollController = FixedExtentScrollController(initialItem: valueIndex);
  }

  Widget _headerWidget() {
    return Container(
      height: 60,
      child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            TextButton(
              child: Text(
                LocaleKeys.login_cancel.trc(),
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            TextButton(
              child: Text(
                LocaleKeys.add_device_confirm.trc(),
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),
              onPressed: () {
                if (widget.onSelectedValue != null) {
                  String date = valueList[valueIndex];
                  widget.onSelectedValue(date);
                }
              },
            ),
          ]),
      decoration: BoxDecoration(
        border: Border(
            bottom: BorderSide(color: Colors.grey.withOpacity(0.1), width: 1)),
      ),
    );
  }

  Widget _datePicker() {
    return Container(
      color: isDarkMode ? MainCommon.darkBlueMaterialColor : Colors.white,
      height: 200,
      child: Stack(
        children: [
          Row(
            children: <Widget>[
              Expanded(child: _yearPickerView()),
            ],
          ),
          Container(
            color: Color(0xFFD1D1D6),
            margin: EdgeInsets.only(top: 78),
            height: 1,
          ),
          Container(
            color: Color(0xFFD1D1D6),
            margin: EdgeInsets.only(top: 124),
            height: 1,
          ),
          Container(
            margin: EdgeInsets.only(top: 78),
            child: Row(
              children: [
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.only(left: _columnWidth - 40, top: 9),
                    child: Text(
                      '',
                      style: TextStyle(color: Colors.grey, fontSize: 16),
                      maxLines: 1,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.only(left: _columnWidth - 45, top: 12),
                    child: Text(
                      'min',
                      style: TextStyle(color: Colors.grey, fontSize: 16),
                      maxLines: 1,
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.only(left: _columnWidth - 50, top: 9),
                    child: Text(
                      '',
                      style: TextStyle(color: Colors.grey, fontSize: 16),
                      maxLines: 1,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  ///年
  Widget _yearPickerView() {
    return Container(
      child: CupertinoPicker(
        scrollController: valueScrollController,
        children: _buildYearWidget(),
        looping: false,
        selectionOverlay: Center(),
        onSelectedItemChanged: (index) {
          setState(() {
            valueIndex = index;
          });
        },
        itemExtent: 44,
      ),
    );
  }

  ///年Widget
  List<Widget> _buildYearWidget() {
    List<Widget> yearListWidget = []; //先建一个数组用于存放循环生成的widget
    Widget content; //单独一个widget组件，用于返回需要生成的内容widget
    for (var item in valueList) {
      yearListWidget.add(
        new Center(
          child: Text(
            item,
            style: TextStyle(color: Colors.black87, fontSize: 16),
            maxLines: 1,
          ),
        ),
      );
    }

    return yearListWidget;
  }
}